<template>
  <div>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="学号">
        <el-input v-model="formInline.user" placeholder="学号"></el-input>
      </el-form-item>
      <el-form-item label="学院">
        <el-select v-model="formInline.region" placeholder="学院">
          <el-option label="" value=""></el-option>
          <el-option
            v-for="(item, index) in collegeName"
            :key="index"
            :label="item.college"
            :value="item.college"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
        <el-button type="primary" @click="onAdd">添加</el-button>
      </el-form-item>
    </el-form>

    <!-- 表格区域 -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="姓名" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.teacher_name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="账号" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.teacher_num }}</span>
        </template>
      </el-table-column>
      <el-table-column label="职称" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{
            scope.row.teacher_Workplace
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="所属学院" width="220">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.teacher_college }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">
            查看
          </el-button>
          <el-button size="mini" @click="handleUpdate(scope.row)">
            修改密码
          </el-button>
          <el-button size="mini" @click="handleDele(scope.row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 查看信息弹出框 -->
    <el-dialog title="信息" :visible.sync="dialogVisible" width="30%">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="姓名">
          <el-input disabled v-model="form.teacher_name"></el-input>
        </el-form-item>
        <el-form-item label="职工账号">
          <el-input disabled v-model="form.teacher_num"></el-input>
        </el-form-item>
        <el-form-item label="学位">
          <el-input disabled v-model="form.teacher_degree"></el-input>
        </el-form-item>
        <el-form-item label="学院">
          <el-input disabled v-model="form.teacher_college"></el-input>
        </el-form-item>
        <el-form-item label="电话">
          <el-input disabled v-model="form.teacher_phone"></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input disabled v-model="form.teacher_email"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>

    <!-- 修改密码弹出框 -->
    <el-dialog title="信息" :visible.sync="dialogVisibless" width="30%">
      <el-form ref="forms" :rules="rules" :model="forms" label-width="80px">
        <el-form-item label="旧密码">
          <el-input disabled v-model="forms.old"></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="new">
          <el-input v-model="forms.new"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibless = false">取 消</el-button>
        <el-button type="primary" @click="trueUpdate">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 添加弹出框 -->
    <el-dialog title="添加" :visible.sync="dialogVisibles" width="30%">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="姓名" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="教师账号" prop="num">
          <el-input v-model="ruleForm.num"></el-input>
        </el-form-item>
        <el-form-item label="教师职称" prop="workplace">
          <el-input v-model="ruleForm.workplace"></el-input>
        </el-form-item>
        <el-form-item label="文化程度" prop="degree">
          <el-input v-model="ruleForm.degree"></el-input>
        </el-form-item>
        <el-form-item label="学院" prop="region">
          <el-select v-model="ruleForm.region" placeholder="学院">
            <el-option
              v-for="(item, index) in collegeName"
              :key="index"
              :label="item.college"
              :value="item.college"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibles = false">取 消</el-button>
        <el-button type="primary" @click="true_add">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 分页区域 -->
    <el-pagination
      background
      layout="prev, pager, next"
      :total="total"
      :page-size="queryinfo.pageSize"
      @current-change="currentChange"
      @prev-click="prevClick"
      @next-click="nextClick"
      :hide-on-single-page="age"
    >
    </el-pagination>
  </div>
</template>
<script>
import { mapState } from "vuex";
export default {
  created() {
    this.get_teacherAllInfo();
  },
  data() {
    return {
      total: null,
      age: true,
      college_name: [],
      queryinfo: {
        current: 1,
        pageSize: 4,
      },
      dialogVisibles: false,
      dialogVisibless: false,
      forms: {
        old: "",
        new: "",
      },
      ruleForm: {},
      rules: {
        name: { required: true, message: "必填", trigger: "blur" },
        region: { required: true, message: "必填", trigger: "blur" },
        workplace: { required: true, message: "必填", trigger: "blur" },
        degree: { required: true, message: "必填", trigger: "blur" },
        num: [
          { required: true, message: "必填", trigger: "blur" },
          { min: 6, max: 12, message: "账号6-12位", trigger: "blur" },
        ],
        new: [
          { required: true, message: "必填", trigger: "blur" },
          { min: 6, max: 12, message: "密码6-12位", trigger: "blur" },
        ],
      },
      form: {},
      dialogVisible: false,
      formInline: {},
      tableData: [],
    };
  },
  computed: {
    ...mapState(["collegeName"]),
  },

  methods: {
    //查询事件
    onSubmit() {
      // console.log("submit!");
      this.get_teacherAllInfo();
    },
    onAdd() {
      this.dialogVisibles = true;
    },
    true_add() {
      this.$refs.ruleForm.validate((valid) => {
        if (!valid) return;
        this.$http
          .post(
            "http://127.0.0.1:8080/bigAdmin/add_teacherInfo",
            this.$qs.stringify(this.ruleForm)
          )
          .then((res) => {
            if (res.data.status == 0) {
              this.dialogVisible = false;
              this.get_teacherAllInfo();
              this.$message.success(res.data.message);
              this.ruleForm = {};
            } else {
              this.$message.error(res.data.message);
            }
          })
          .catch((err) => {
            this.$message.error(err);
          });
      });
    },
    // 查看信息详情
    handleEdit(index, row) {
      // console.log(index, row);
      this.dialogVisible = true;
      this.form = row;
    },
    //修改密码按钮
    handleUpdate(row) {
      this.dialogVisibless = true;
      // console.log(row);
      this.$http
        .post(
          "http://127.0.0.1:8080/minAdmin/get_teacherpwd",
          this.$qs.stringify(row)
        )
        .then((res) => {
          // console.log(res);
          if (res.data.status == 0) {
            this.forms.old = res.data.data[0].password;
            // console.log(res.data.data[0].password);
          }
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
    // 确认修改密码
    trueUpdate() {
      this.$refs.forms.validate((valid) => {
        if (!valid) return;
        this.$http
          .post(
            "http://127.0.0.1:8080/minAdmin//update_teacherpwd",
            this.$qs.stringify(this.forms)
          )
          .then((res) => {
            if (res.data.status == 0) {
              this.$message.success(res.data.message);
              this.dialogVisibless = false;
              this.forms.new = "";
            } else {
              this.$message.error(res.data.message);
            }
          })
          .catch((err) => {
            this.$message.error(err);
          });
      });
    },
    //删除教师按钮
    handleDele(row) {
      // console.log(row);
      this.$http
        .post(
          "http://127.0.0.1:8080/bigAdmin/dele_teacherinfo",
          this.$qs.stringify(row)
        )
        .then((res) => {
          if (res.data.status == 0) {
            this.$message.success(res.data.message);
            this.get_teacherAllInfo();
          } else {
            this.$message.error(res.data.message);
          }
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
    // 获取所有教师的信息
    get_teacherAllInfo() {
      const info = { ...this.formInline, ...this.queryinfo };
      this.$http
        .get("http://127.0.0.1:8080/bigAdmin/get_teacherAllInfo", {
          params: info,
        })
        .then((res) => {
          // console.log(res);
          // this.tableData = res.data.data;
          if (res.data.status == 0) {
            this.total = res.data.data.total;
            this.tableData = res.data.data.datalist;
          } else {
            this.tableData = [];
            this.$message.error(res.data.message);
          }
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },

    //点击页码跳转
    currentChange(val) {
      this.queryinfo.current = val;
      this.get_teacherAllInfo();
    },

    prevClick(val) {
      this.queryinfo.current = val;
      this.get_teacherAllInfo();
    },

    nextClick(val) {
      this.queryinfo.current = val;
      this.get_teacherAllInfo();
    },
  },
};
</script>
<style lang="less" scoped>
.el-pagination {
  position: fixed;
  top: 70%;
  left: 50%;
  transform: translate(-50%, 0);
}
</style>
